<template>
	<view class="newsde">
			<view class="title same">
				<text>{{newdeta.title}}</text>
			</view>
			
			<view class="same">
				<image class="imgs" :src="newdeta.cover" mode=""></image>
			</view>
			
			<view v-html="newdeta.conent" class="txt">
			</view>
			
			<view class="card-actions">
				<view class="card-actions-item" @click="sendcomment">
					<u-icon name="chat"  color="#ff5500"  size="22" ></u-icon>
					<text class="card-actions-item-text"> {{newdeta.commentNum}}</text>
				</view>
				<view class="card-actions-item" @click="clicklike">
					<u-icon name="thumb-up" size="22" color="#ff5500"  v-if="nlikeType =='no'"></u-icon>
					<u-icon name="thumb-up-fill"  color="#ff5500"  v-else size="22"></u-icon>
					<text class="card-actions-item-text"> {{newdeta.likeNum}}</text>
					
				</view>
				<view class="card-actions-item" >
					<u-icon name="email" color="#ff5500" size="22"></u-icon>
					<text class="card-actions-item-text"> {{newdeta.readNum}}</text>
				</view>
			</view>
			
			<view class="comment"  v-show="show">
				<view class="send">
					<up-input
					    placeholder="请评论输入内容"
					    v-model="ptvalue"
					  ></up-input>
			
					  <button class="mini-btn" type="warn" size="mini"
					  style="padding: 4px 12px;margin-left:4px;" 
					  @click="sendping"
					  >评论</button>
				</view>
				
				<view class="comtxt_item" v-for="item in pinglist" :key="item.id">
					<view class="commentcontent same">
						<text class="userName">{{item.userName}} : </text>
						<text class="newsTitle">{{item.content}}</text>
					</view>

					<view class="commentDate ">
						<text class="time">{{item.commentDate}}</text>
						<view class="likeNum" @click='clickping(item.id)'>
							<u-icon name="thumb-up" size="22" v-if="item.liketype=='no'"></u-icon>
							<u-icon name="thumb-up-fill" size="22" v-else></u-icon>
							<text>{{item.likeNum}}</text>
						</view>
					</view>
				</view>
				
				<view class="uni-pagination">
					
				<uni-pagination title="标题文字" 
				prev-text="上一页" 
				next-text="下一页"  
				@change="changepage"  
				:total="total" 
				current="1"/>
				</view>
			</view>
	</view>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue';
import {getnewde,gotolike,getpinglist,gotopressComment,sendpressComment} from '../../../api/parkApi.js'
import {baseurl} from '../../../api/request.js'
import {newwde,textping} from '@/mock/home.js'
import {onLoad} from '@dcloudio/uni-app'

const id = ref()  //id       //新闻的id
const newdeta =ref({})      //新闻详情
const nlikeType=ref('no')   //新闻的点赞
const ptvalue=ref()         //评论的内容
const show=ref(false)      //评论的显示和隐藏
const pinglist =ref()      //评论列表
const plikeType=ref('no')  //评论里的点赞
const total=ref()          //评论的总条数
const pageNum= ref(1)       //当前页码
const pageSize=ref(10)       //每页数据条数

//点击下一页
const changepage=(e)=>{
    //当前页码变化 再去掉接口
	pageNum.value=e.current
	getcommentdeta()
}

//发送评论
const sendping=async()=>{
	//判断内容为空提示
	if(ptvalue.value==null){
			uni.showToast({
				title:'内容不能为空',
				icon:"error"
			})
		return;
	}
	//内容不为空才能发表
	let res = await sendpressComment({
		header:{
			"Authorization":uni.getStorageSync('token')
		},
		data:{
			content:ptvalue.value,
			newsId:id.value
		}
	})
     //评论发送成功 更新评论列表数据显示 提示评论成功
	if(res.code==200){

       getcommentdeta()

		uni.showToast({
			title:'评论成功'
		})
	}else{
		//模拟数据
		let last ={
			id:pinglist.value[pinglist.value.length-1].id+1,
			img:'https://img1.baidu.com/it/u=2408367047,1744413017&fm=253&fmt=auto&app=120&f=JPEG',
			content:ptvalue.value,
			commentDate:getNewdate(),
			likeNum:0,
			liketype: "no",
			userName: "rty666"
		}
		
		pinglist.value.push(last)
		
		uni.showToast({
			title:'评论成功'
		})
	}
}

//获取当前时间
const getNewdate=()=>{
	let date=new Date()
	let year =date.getFullYear()
	let mon = date.getMonth()+1
	let day =date.getDate()
	let hou =date.getHours()
	let min =date.getMinutes()
	let str = '-'
	
	return year+str+mon+str+day+' '+hou+':'+min
}

//点击评论里面的点赞
const clickping=async(val)=>{

	if(plikeType.value=='yes'){
		//已经点赞过了  取消点赞标识变  数量减1
		
		pinglist.value.map((item,index)=>{

			if(item.id==val){
				item.liketype='no'
				item.likeNum--
				return item
			}
		})
		plikeType.value='no'
		
         console.log(pinglist.value);
		
	}else{
		//没有点赞  点赞后数量+1  点赞的哪个标识变
		
		let res = await gotopressComment({
			header:{
				"Authorization":uni.getStorageSync('token')
			},
			id:val
		})
		if(res.code==200){
			plikeType.value='yes'
			
			pinglist.value.map((item,index)=>{
			
				if(item.id==val){
					item.liketype='yes'
					item.likeNum++
					return item
				}
				})
		
		}else{
			//模拟数据
			
			plikeType.value='yes'
			
			pinglist.value.map((item,index)=>{
			
				if(item.id==val){
					item.liketype='yes'
					item.likeNum++
					return item
				}
				})
			
		}
	 console.log(pinglist.value);
	}
	
}

//点击评论显示 再次点击隐藏评论
const sendcomment=async()=>{

	show.value=!show.value
 
	if(!show.value){
		return;
	}
	getcommentdeta()
	
}

//获取评论列表
const getcommentdeta=async()=>{
	let res = await getpinglist({
		data:{
			newsId:id.value,
			pageNum:pageNum.value,
			pageSize:pageSize.value
		}
	})
	
	if(res.code==200){
	total.value=res.total	
	 pinglist.value=res.rows.map(item=>{
		 item.liketype=plikeType.value
		 return item
	 })	
	 
	}else{
		//模拟数据
	pinglist.value=textping().rows.map(item=>{
			 item.liketype=plikeType.value
			 return item
	})
	total.value=textping().rows.length
		
		
	}
	console.log(pinglist.value);
}

//点击点赞
const clicklike=async()=>{
	
	//判断新闻是否已经点赞过了
	if(nlikeType.value=='yes'){
		//点赞过了 
		console.log(111);
		
		nlikeType.value='no'
		newdeta.value.likeNum--;
		
	}else{
		//没有点赞   就可以点赞
		console.log(222);
		
		let res = await gotolike({
			id:id.value,
			header:{
				"Authorization":uni.getStorageSync('token')
			},
			data:{}
		})
		
		if(res.code==200){
			nlikeType.value='yes'
			newdeta.value.likeNum++;
		}else{
			//模拟数据
			nlikeType.value='yes'
			newdeta.value.likeNum++;
			
		}
		console.log(res);
	}
	

	
}

 //获取新闻详情内容
const getnewdata=async()=>{
	// id.value=getCurrentInstance().attrs.id
	let res = await getnewde({
		id:id.value,
		data:{}
	})
	if(res.code==200){
		res.data.img=baseurl+res.data.cover
		res.data.liketype=nlikeType.value
		newdeta.value=res.data
	}else{
		//模拟数据
	
		newwde(id.value).rows[0].liketype=nlikeType.value
		newdeta.value=newwde(id.value).rows[0]
		
		
	}
	console.log(newdeta.value);
}

onLoad((option)=>{
	id.value=option.id
	getnewdata()
})
	
// onMounted(()=>{
	
// 	getnewdata()
// })

</script>
<style lang="scss">
	::v-deep uni-page-wrapper{
		background-color: rgb(224, 238, 248);
	}
	
	.newsde{
			background-color: rgb(224, 238, 248);
			padding: 6px 10px;
			margin-bottom: 4px;
			
		.same{
			margin: 8px 0px;
		}
		
		 .imgs{
			 width: 100%;
		}
		
		.title{
			font-size: 18px;
			font-weight: 700;
			margin: 14px 0px;
		}
		
		
		.txt{
		  color: #515151;	
			
			::v-deep img{
				width:100%;
			}
			
		}
		
		.card-actions{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 8px 0px;
			color: #ff5500;
			
		  .card-actions-item{
			  display: flex;
			  align-items: center;
		  }
			
		}
		.comment{
		background-color: rgb(224, 238, 248);	
		
		.send{
			display: flex;
			align-items: center;
		}
		
		.comtxt_item{
			display: flex;
			flex-direction: column;
			padding: 4px 10px;
			
		  .commentcontent{
			 
			.userName{
				font-size: 16px;
				font-weight: 700;
				margin-right: 8px;
			} 
		  }
		  .commentDate{
			  display: flex;
			   align-items: center;
			   justify-content: space-between;
			   color: #8b8b8b;

			  .likeNum{
				
				  display: flex;
				  align-items: center;
				  
			  } 
		  }
		}
		
		.uni-pagination{
			padding: 2px 0px;
		}	
			
		}
		
		 
		
	}

</style>
